'use client'
import React, { useEffect } from 'react'

import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const page = () => {

    const init = () => {
        mapboxgl.accessToken = 'pk.eyJ1IjoiZW1iZXJlZWVlIiwiYSI6ImNsbG9tZnhhdTBjOW0zZW9hNndjMDBheWQifQ.2tdcbznsaY7x4V0snpV9ZA';
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            projection: 'globe',
            style: 'mapbox://styles/mapbox/outdoors-v12',
            center: [-121.403732, 40.492392],
            zoom: 10
        });

        map.on('style.load', () => {
            map.setFog({
                color: 'rgb(186, 210, 235)', // Lower atmosphere
                'high-color': 'rgb(36, 92, 223)', // Upper atmosphere
                'horizon-blend': 0.02, // Atmosphere thickness (default 0.2 at low zooms)
                'space-color': 'rgb(11, 11, 25)', // Background color
                'star-intensity': 0.6 // Background star brightness (default 0.35 at low zoooms )
            });
        });

        map.on('load', () => {
            map.addSource('national-park', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': [
                        {
                            'type': 'Feature',
                            "properties": {
                                "name": "Park A",
                                "color_parkA": "3",
                            },

                            'geometry': {
                                'type': 'Polygon',
                                'coordinates': [
                                    [
                                        [-121.353637, 40.584978],
                                        [-121.284551, 40.584758],
                                        [-121.275349, 40.541646],
                                        [-121.246768, 40.541017],
                                        [-121.251343, 40.423383],
                                        [-121.32687, 40.423768],
                                        [-121.360619, 40.43479],
                                        [-121.363694, 40.409124],
                                        [-121.439713, 40.409197],
                                        [-121.439711, 40.423791],
                                        [-121.572133, 40.423548],
                                        [-121.577415, 40.550766],
                                        [-121.539486, 40.558107],
                                        [-121.520284, 40.572459],
                                        [-121.487219, 40.550822],
                                        [-121.446951, 40.56319],
                                        [-121.370644, 40.563267],
                                        [-121.353637, 40.584978]
                                    ]
                                ],

                            }
                        },
                        {
                            'type': 'Feature',
                            "properties": {
                                "name": "Park A",
                                "color": "#ff0000"
                            },
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [-121.415061, 40.506229]
                            }
                        },
                        {
                            'type': 'Feature',
                            "properties": {
                                "name": "Park A",
                                "color": "#ff0000"
                            },
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [-121.505184, 40.488084]
                            }
                        },
                        {
                            'type': 'Feature',
                            "properties": {
                                "name": "Park A",
                                "color": "#ff0000"
                            },
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [-121.354465, 40.488737]
                            }
                        }
                    ]
                }
            });
            console.log('add source com,plete', map);

            map.addLayer({
                'id': 'park-boundary',
                'type': 'fill',
                'source': 'national-park',
                'paint': {
                    
                    // 'fill-color': '#880088',
                    'fill-color': [
                        'match',
                        ['get', 'color_parkA'],
                        '1',
                        'green',
                        '2',
                        'purple',
                        'steelblue'
                    ],
                    'fill-opacity': 0.4
                },
                'filter': ['==', '$type', 'Polygon']
            });
            console.log('add layer com,plete', map);


            map.addLayer({
                'id': 'park-volcanoes',
                'type': 'circle',
                'source': 'national-park',
                'paint': {
                    'circle-radius': 6,
                    'circle-color': '#B42222'
                },
                'filter': ['==', '$type', 'Point']
            });
        });
    }
    useEffect(() => {
        init()
    }, [])
    return (
        <div>
            <div className='mapbox_container' id='map'>

            </div>
        </div>
    )
}

export default page